<template>
  <div class="seckill-container nav-bar-top">
    <!-- 导航栏 -->
    <van-nav-bar class="nav-bar" title="限时秒杀" left-arrow @click-left="$router.back()"/>
    <!-- 活动状态 -->
    <van-tabs swipeable type="card" v-model="active" class="card-tab" @change="change">
      <van-tab name="1" title="进行中">
        <!-- 秒杀商品 -->
        <div class="starting" v-for="(goods, index) in goodsList" :key="index">
          <div class="order-goods-item circle-bg" @click="$router.push({path: '/goodsDetail', query: {id: goods.goodsId, type:'secKill'}})">
            <van-image class="goods-img"fit="container" :src="goods.goodsPic" />
            <div class="goods">
              <span class="title van-multi-ellipsis--l2">{{goods.goodsName}}</span>
              <span class="num"><van-progress :show-pivot="false" :percentage="(goods.stock-goods.remainStock) * 100 / goods.stock" /><span class="seckill-percent">已抢{{((goods.stock-goods.remainStock) * 100 / goods.stock) | toDecimal2}}%</span></span>
              <div class="price">
                <span class="money">
                  <span class="original">¥{{goods.goodsPrice | fentoyuan}}</span>
                  ¥{{goods.goodsSecKillPrice | fentoyuan}}
                </span>
              </div>
            </div>
          </div>
        </div>
        <van-empty
          v-if="goodsList.length == 0"
          image="imgs/empty.png"
          description="暂无秒杀商品~"
        />
      </van-tab>
      <van-tab name="0" title="即将开始">
        <!-- 秒杀商品 -->
        <div class="seckill-goods not-started" v-for="(goods, index) in goodsList" :key="index">
          <div class='seckill-time'>
            <span class="start-time">{{goods.startTime.substring(5, 19)}}</span>
            ~
            <span class="end-time">{{goods.endTime.substring(5, 19)}}</span>
          </div>
          <div class="order-goods-item circle-bg" @click="$router.push({path: '/goodsDetail', query: {id: goods.goodsId, type:'secKill'}})">
            <van-image class="goods-img" width="90" height="90" fit="container" :src="goods.goodsPic" />
            <div class="goods">
              <span class="title van-multi-ellipsis--l2">{{goods.goodsName}}</span>
              <div class="price">
                <span class="money">
                  <span class="original">¥{{goods.goodsPrice | fentoyuan}}</span>
                  ¥{{goods.goodsSecKillPrice | fentoyuan}}
                </span>
              </div>
            </div>
          </div>
        </div>
        <van-empty
          v-if="goodsList.length == 0"
          image="imgs/empty.png"
          description="暂无秒杀商品~"
        />
      </van-tab>
      <van-tab name="2" title="已结束">
        <!-- 秒杀商品 -->
        <div class="complete" v-for="(goods, index) in goodsList" :key="index">
            <div class="order-goods-item circle-bg" @click="$router.push({path: '/goodsDetail', query: {id: goods.goodsId, type:'secKill'}})">
              <van-image class="goods-img" width="90" height="90" fit="container" :src="goods.goodsPic" />
              <div class="goods">
                <span class="title van-multi-ellipsis--l2">{{goods.goodsName}}</span>
                <span class="num"><van-progress :show-pivot="false" :percentage="(goods.stock-goods.remainStock) * 100 / goods.stock" /><span class="seckill-percent">已抢{{((goods.stock-goods.remainStock) * 100 / goods.stock) | toDecimal2}}%</span></span>
                <div class="price">
                  <span class="money">
                    <span class="original">¥{{goods.goodsPrice | fentoyuan}}</span>
                    ¥{{goods.goodsSecKillPrice | fentoyuan}}
                  </span>
                </div>
              </div>
            </div>
        </div>
        <van-empty
          v-if="goodsList.length == 0"
          image="imgs/empty.png"
          description="暂无秒杀商品~"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import constants from '@/config/constants'
import sysApi from '@/api/sysApi'

export default {
  name: 'seckill',
  data () {
    return {
      active: "1",
      goodsList: []
    }
  },
  created () {
    this.getSecKillGoodsList()
  },
  methods: {
    /* 获取秒杀商品 */
    async getSecKillGoodsList () {
      this.goodsList = [];
      const result = await sysApi.secKillGoodsList({
        status: this.active
      })
			if(result.code == constants.SUCCESS){
				this.goodsList = result.data;
			}
    },
    change (name, title) {
      this.active = name;
      this.getSecKillGoodsList()
    }
  }
}
</script>

<style lang="scss">
.seckill-container{
   margin-top: 55px;
   .van-tabs__content{
     padding: 10px 5px 0px 5px;
   }
   .seckill-goods{
     .seckill-time{
       font-size: 14px;
       color: #999;
       margin: 15px 10px 15px 10px;
       display: flex;
       justify-content: center;
       .start-time{
         margin-right: 10px;
       }
       .end-time{
         margin-left: 10px;
       }
     }
   }
   .not-started{
     .goods-img{
       height: 70px !important;
       width: 70px !important;
     }
   }
   .starting, .complete{
     .goods-img{
       height: 90px !important;
       width: 90px !important;
     }
   }
   .order-goods-item{
     background: #fff;
     padding: 20px 15px;
     .goods{
       .num{
         .van-progress{
           flex: 1;
         }
         .seckill-percent{
           width: 75px;
           margin-left: 10px;
           color: #999;
           font-size: 12px;
         }
       }
     }
     .price{
       margin-top: 15px;
       .money{
         color: #e1212b;
         .original{
           color: #999;
           text-decoration: line-through;
           margin-right: 10px;
         }
       }
     }
   }
}
</style>
